文章内の特定の文字をピックアップする
今回は、文章内の特定の文字をピックアップする方法として、その文字上にカーソルを移動させたときに、同じ文字に背景色をつける方法を紹介します。「どのようなテクニックか分からない」という人も多くいると思いますので、まずはサンプルページでテクニックの概要を確認してみてください。 サンプルページ

→ 背景色を付ける文字をSPANタグで指定する
 
まずは、背景色でピックアップする文字をSPANタグで指定します。SPANタグにはclass属性を追加し、ピックアップする同じ文字に同じクラス名を付けます。今回は、全ての「Infoseek」という文字に"keyword1"というクラス名を付けました。また、onMouseOverイベント、onMouseOutイベントを追加し、文字上にマウスが来たとき、およびマウスが文字上から外れたときに呼び出すJavaScript関数を指定しておきます。
・・・・・・<SPAN class="keyword1" onMouseOver="onlight()" onMouseOut="offlight()">Infoseek</SPAN>・・・・・・
 


→ マウスが文字上に来たときの処理を記述する
 
続いて、JavaScriptを記述します。まずは、「Infoseek」の文字上にマウスが来たときに動作する関数「onlight()」を作成します。ここでは、「document.getElementsByTagName('SPAN')」で「a」に全てのSPANタグを代入します。続いて、for文で各SPANタグのクラス名を確認し、クラス名が"keyword1"であった場合、その背景色を"#FF6666"に変更するという処理を実行します。これで、「Infoseek」の文字上にマウスが来たときに、その背景色を薄い赤色に変更できます。色をランダムに変更できます。
<SCRIPT language="JavaScript">
<!--
function onlight(){
a=document.getElementsByTagName('SPAN');
for (var i=0; i<a.length; i++) {
if (a[i].className == "keyword1") {
a[i].style.backgroundColor="#FF6666";
}
}
}
// -->
</SCRIPT>
 


→ マウスが文字上から外れたときの処理を記述する
 
今回のテクニックを完成するには、マウスが「Infoseek」の文字から外れたときの関数「offlight()」も作成しておく必要があります。この処理手順は基本的に関数「onlight()」と同じであり、背景色を白(#FFFFFF)に戻してやればテクニックが完成します。
<SCRIPT language="JavaScript">
<!--
function onlight(){
a=document.getElementsByTagName('SPAN');
for (var i=0; i<a.length; i++) {
if (a[i].className == "keyword1") {
a[i].style.backgroundColor="#FF6666";
}
}
}

function offlight(){
b=document.getElementsByTagName('SPAN');
for (var i=0; i<b.length; i++) {
if (b[i].className == "keyword1") {
b[i].style.backgroundColor="#FFFFFF";
}
}
}
// -->
</SCRIPT>

サンプルページ


yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze